<template>

  <div class="wrapper">

    <!-- 棋盘顶部的提示信息 -->
    <div class="gameTop">
      <img :src="gamePlayer.img.src" :alt="gamePlayer.img.alt">
      <p>{{ gamePlayer.name }}'s turn!</p>
    </div>

    <!-- 棋盘中间的棋盘 -->
    <div class="gameBoard" :class="gamePlayer.type">
      <div
          v-for="(cell, index) in cells"
          :key="index"
          class="cell"
          :class="cell"
          @click="handleCellClick(index)">
      </div>
    </div>

    <!-- 游戏结束遮罩层信息 -->
    <div class="gameOverInfo" :class="{ show: showGameOverInfo}">
      <div class="result" v-if="gameResult">
        <img v-if="gameResult.img" :src="gameResult.img.src" :alt="gameResult.img.alt">
        <p>{{ gameResult.text }}</p>
        <button class="resultBtn" @click="resetGame">Play again</button>
      </div>
    </div>

  </div>

</template>

<script setup>
import { ref, computed } from 'vue'
// 记录当前是不是白棋先手
const unicornTurn = ref(true)
// 计算棋盘所有属性
const cells = ref(Array(9).fill(''))
const winner = ref(null)
// 记录游戏结束信息遮罩层是否显示
const showGameOverInfo = ref(false)

// 计算玩家所有属性
const gamePlayer = computed(() => {
  return {
    name: unicornTurn.value ? 'Unicorn' : 'Dragon',
    type: unicornTurn.value ? 'unicorn' : 'dragon',
    img: {
      src: unicornTurn.value ? '/src/assets/gif/9.gif' : '/src/assets/gif/5.gif',
      alt: unicornTurn.value ? 'unicorn' : 'dragon'
    }
  }
})

// 计算游戏结果
const gameResult = computed(() => {
  if (winner.value) {
    return {
      text: `${winner.value} wins!`,
      img: {
        src: winner.value === 'Unicorn' ? '/src/assets/gif/9.gif' : '/src/assets/gif/5.gif',
        alt: winner.value.toLowerCase()
      }
    }
  } else if (cells.value.every(Boolean)) {
    return {
      text: 'It\'s a draw!',
      img: {
        src: '/src/assets/gif/6.gif',
        alt: 'Draw'
      }
    }
  }
})

// 点击棋盘格的事件
const handleCellClick = (index) => {
  // 判断是否已经有棋子或游戏结束
  if (cells.value[index] || winner.value) return
  // 更新玩家信息
  gamePlayer.value = {
    name: unicornTurn.value ? 'Unicorn' : 'Dragon',
    type: unicornTurn.value ? 'unicorn' : 'dragon',
    img: {
      src: unicornTurn.value ? '/src/assets/gif/9.gif' : '/src/assets/gif/5.gif',
      alt: unicornTurn.value ? 'Unicorn' : 'Dragon'
    }
  }
  // 更新单元格状态
  cells.value[index] = gamePlayer.value.type
  // 判断是否获胜
  if (checkWin()) {
    winner.value = gamePlayer.value.name
    showGameOverInfo.value = true
  } else if (cells.value.every(Boolean)) {
    showGameOverInfo.value = true
  } else {
    // 切换到下一个玩家
    unicornTurn.value = !unicornTurn.value
  }
}

// 判断是否获胜
const checkWin = () => {
  return winningConditions.some(condition => {
    // 遍历所有赢的条件
    return condition.every(index => cells.value[index] === gamePlayer.value.type)
  })
}

// 所有赢的结果
const winningConditions = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], // 行
  [0, 3, 6], [1, 4, 7], [2, 5, 8], // 列
  [0, 4, 8], [2, 4, 6] // 对角线
]

// 重置游戏
const resetGame = () => {
  // 清空棋盘,初始化所有条件
  cells.value.fill('')
  winner.value = null
  showGameOverInfo.value = false
  unicornTurn.value = true
}



</script>

<style scoped>
.wrapper {
  width: 500px;
  height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #55acee53;
  box-shadow: 5px 5px 0 #55acee;
  border-radius: 10px;
}

.gameTop {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c8fff8;
  border-radius: 10px;
  padding: 0 10px;
  margin-top: 20px;
  box-shadow: 0 5px 20px 10px #55acee;
}

.gameTop img {
  height: 120px;
  border-radius: 10px;
  margin: 10px;
}

.gameTop p {
  color: #f17b7b;
  margin-right: 5px;
  font-size: 32px;
  font-weight: bold;
  font-family: "Arial, sans-serif", sans-serif;
}

.gameBoard {
  width: 90%;
  height: 100%;
  margin: 20px;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  grid-template-rows: repeat(3, minmax(130px, 1fr));
  grid-gap: 10px;
}


/* 鼠标悬浮的时候显示图片 */
.gameBoard.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
.gameBoard.dragon .cell:not(.dragon):not(.unicorn):hover::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
  opacity: 90%;
}

.gameBoard.unicorn .cell:not(.dragon):hover::before {
  background-image: url("/src/assets/gif/9.gif");
}

.gameBoard.dragon .cell:not(.unicorn):hover::before {
  background-image: url("/src/assets/gif/5.gif");
}

.gameBoard.unicorn .cell:not(.unicorn):not(.dragon):hover::after,
.gameBoard.dragon .cell:not(.unicorn):not(.dragon):hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  background-size: contain;
}


.cell {
  width: 130px;
  height: 130px;
  opacity: 0.5;
  cursor: pointer;
  position: relative;
  background-color: #f5f5f5;
  border-radius: 10px;
  transition: opacity 0.2s ease-in-out;
}

.cell:hover {
  opacity: 1;
}

/* 白棋和黑棋的样式 */
.cell.dragon,
.cell.unicorn {
  opacity: 1;
  position: relative;
  cursor: not-allowed;
}

.cell.dragon::before,
.cell.unicorn::before {
  content: "";
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
}

.cell.dragon::before {
  background-image: url("/src/assets/gif/5.gif");
}

.cell.unicorn::before {
  background-image: url("/src/assets/gif/9.gif");
}

.gameOverInfo {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0d1021;
  z-index: 999;
}

.gameOverInfo.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.result {
  font-family: "Arial, sans-serif", sans-serif;
  width: 600px;
  border-radius: 10px;
  padding: 50px;
  background-color: #ffffff;
  box-shadow: 5px 5px 0 #55acee;
}

.result img {
  width: 500px;
  border-radius: 20px;
}

.result p {
  font-size: 48px;
  font-weight: bold;
  color: #1fb9f6;
  margin: 20px;
}

.resultBtn {
  color: #f5f5f5;
  font-family: "Arial, sans-serif", sans-serif;
  font-size: 32px;
  font-weight: bold;
  white-space: nowrap;
  border: none;
  padding: 10px 20px;
  background-color: #a186be;
  box-shadow: 5px 5px 0 #55acee;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  position: relative;
}

.resultBtn:hover {
  transform: scale(1.2);
}

.resultBtn:active {
  top: 6px;
  left: 6px;
  box-shadow: none;
  background-color: #9475b5;
}


</style>
